<template>
  <div class="topic">
    <div class="item" v-for="item in topicList" :key="item.id">
      <div class="img">
        <img :src="item.scene_pic_url" style="width: 100%" alt="" />
      </div>
      <div class="content">
        <h4 class="this_title">{{ item.title }}</h4>
        <h5>{{ item.subtitle }}</h5>
        <h4 class="this_price">{{ item.price_info | RMB }}</h4>
      </div>
    </div>
    <van-grid class="van-grid" :column-num="2">
      <van-grid-item>
        <van-button
          @click="pre"
          :disabled="currentPage > 1 ? false : true"
          type="default"
          size="large"
        >
          上一页
        </van-button>
      </van-grid-item>
      <van-grid-item>
        <van-button
          @click="next"
          :disabled="currentPage < totalPages ? false : true"
          type="default"
          size="large"
        >
          下一页
        </van-button>
      </van-grid-item>
    </van-grid>
    <!-- logo -->
    <div class="logo"></div>
  </div>
</template>

<script>
import { getTopic } from "@/api/topic.js";
export default {
  async created() {
    this.load();
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      count: 0,
      totalPages: 0,
      topicList: [],
    };
  },
  methods: {
    async load() {
      const {
        data: {
          data: { count, totalPages, pageSize, currentPage, data },
        },
      } = await getTopic({ page: this.currentPage, size: this.pageSize });
      (this.count = count),
        (this.totalPages = totalPages),
        (this.pageSize = pageSize),
        (this.currentPage = currentPage),
        (this.topicList = data);
    },
    pre() {
      if (this.currentPage <= 1) {
        this.currentPage = 1;
        return;
      }
      this.currentPage--;
      this.load();
    },
    next() {
      if (this.currentPage >= this.totalPages) {
        this.currentPage = this.totalPages;
        return;
      }
      this.currentPage++;
      this.load();
    },
  },
};
</script>

<style lang="less" scoped>
.topic {
  text-align: center;
  .content {
    margin: 8px;
    .this_title {
      font-size: 16px;
    }
    h5 {
      font-size: 12px;
      color: gray;
      margin: 8px;
    }
    .this_price {
      font-size: 16px;
      color: darkred;
    }
  }
  .van-grid {
    font-size: 14px;
  }
  /deep/.van-grid-item__content {
    padding: 0;
  }
}
.logo {
  width: 100%;
  height: 50px;
  background-color: #f4f4f4;
}
</style>
